<template>
    <van-skeleton>
        <template #template>
            <div>
                <van-image round width="100px" height="100px" :src="avatar" class="avatar_img" />
                <label class="nick">{{ hidephone }}</label>
                <label class="please">请输入你的手势密码</label>
            </div>
        </template>
    </van-skeleton>
    <div class="page-container">
        <div id="container" ref="container">
        </div>
    </div>
    <p class="changelogin_method" @click="changeLoginMethod">切换登录方式</p>
    <div class="overlay" v-if="overlayshow">
        <div class="methods">
            <p name="手势" @click="toGeture" class="gesture">手势密码</p>
            <p name="其他账号登录" @click="toOtherMethods" class="other">使用其他账号登录</p>

        </div>
        <p name="手势" @click="cancel" class="cancel">取消</p>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import GestureUnlockRenderer, { Anchor } from 'fly-gesture-unlock';
import http from '../http';

const router = useRouter()
let avatar = localStorage.getItem('avatar');
let phone = ref('')
let hidephone = ref('')
let overlayshow = ref(false)

onMounted(() => {
    phone.value = localStorage.getItem('reginame')
    hidephone.value = phone.value.slice(0, 3) + "****" + phone.value.slice(-4)
})

function changeLoginMethod() {
    overlayshow.value = true
}
function toGeture() {
    overlayshow.value = false
}

function toOtherMethods() {
    router.push('/relogin')
}
function cancel() {
    overlayshow.value = false
}
// 定义额外状态
type ExtraStatus = never;
const container = ref();
const gestureUnlockRenderer = ref<GestureUnlockRenderer<ExtraStatus>>();
onMounted(() => {
    // 借助提供的辅助函数生成锚点
    const anchorDefines = GestureUnlockRenderer.AnchorMatrixFactory({
        canvasSize: { width: container.value.clientWidth, height: container.value.clientHeight },
        padding: 35,
        matrix: { row: 3, column: 3 },
        anchor: { anchorCircleRadius: 30, centerCircleRadius: 10 },
    });

    gestureUnlockRenderer.value = new GestureUnlockRenderer<ExtraStatus>({
        container: container.value,
        anchorDefines,

        anchorStatusStyles: {
            'not-selected': {
                // 锚点圆的边框宽、边框颜色、填充颜色
                anchorCircleBorderWidth: 1,
                anchorCircleBorderColor: '#e0e0e0',
                centerCircleFillColor: '#e0e0e0'
            },
            'selected': {
                // 锚点圆的边框宽、边框颜色、填充颜色
                anchorCircleBorderWidth: 1.5,
                anchorCircleBorderColor: '#128ce8',
                anchorCircleFillColor: '#ffffff',

                // 中心圆的边框宽、边框颜色、填充颜色
                centerCircleFillColor: '#128ce8'
            },
        },
        lineStatusStyles: {
            'normal': {
                lineColor: '#128ce8',
                lineWidth: 1,
            },
        },
        events: {
            'end': gestureEnd,
        },
    });
});

const gestureEnd = (selectedAnchors: Anchor<ExtraStatus>[]) => {
    const anchorIds = selectedAnchors.map(anchor => anchor.id).join('');
    console.log("密码", anchorIds);
    localStorage.setItem('save_pwd', anchorIds)
    const data = {
        phone: phone.value,
        password: anchorIds,
    }
    http.post('/patient/send-password/', data).then(res => {
        console.log("添加成功", res.data);
    }).catch(err => {
        console.log("添加错误", err)
    });
};

</script>
<style scoped>
.div {
    position: relative;
}

.avatar_img {
    position: absolute;
    width: 100px;
    margin: 40px 33%;
}

.nick {
    position: absolute;
    margin: 10px 35%;
    top: 160px;
}

.please {
    position: absolute;
    margin: 30px 27%;
    top: 180px;
}

.changelogin_method {
    position: absolute;
    bottom: 15%;
    margin: 0 37%;
    text-align: center;
    color: #1989fa;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 半透明黑色 */
    z-index: 2;
}

.methods {
    position: absolute;
    width: 80%;
    bottom: 15%;
    margin: 0 10%;
    background-color: white;
    text-align: center;
    border-radius: 10px;
    color: #1989fa;
    z-index: 4;
}

.gesture,
.other {
    border: 1px solid rgb(249, 247, 247);

}

.cancel {
    position: absolute;
    width: 80%;
    height: 50px;
    line-height: 50px;
    bottom: 5%;
    margin: 0 10%;
    margin-top: 50px;
    border-radius: 10px;
    background-color: white;
    text-align: center;
    color: #1989fa;
}

.page-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #446693; */
}

#container {
    background-color: #ffffff;
    width: 300px;
    height: 300px;
    margin-top: 80px;
}
</style>